build(web): generate the UI's Tailwind CSS with the pinned standalone CLI - #685

Summary

Replaces the hand-written Tailwind subset in static/v3/app.css with a real, purged Tailwind build, per the owner decision on the Sept 2026 web UI audit (P0, "undefined utility layer"): standalone Tailwind CLI, no Node, generated CSS committed, the Pi never builds anything.

• scripts/build_css.py downloads the pinned Tailwind v3.4.19 standalone CLI for the current OS/CPU (Linux x64/arm64/armv7, macOS, Windows), checks it against a pinned SHA-256, caches it outside the repo, and builds two files. --check builds to a temp dir and fails if the committed files differ.
• static/v3/tailwind.css (generated, committed) holds the utilities. Content globs: templates/v3/**/*.html, static/v3/**/*.js (excluding vendored *.min.js) and blueprints/**/*.py. A safelist covers the one runtime-assembled family (bg-${color}-50 etc. in tools.html). darkMode is ['selector', '[data-theme="dark"]'], matching how the app switches themes.
• app.css loses ~515 duplicated utility rules and keeps what is actually custom: tokens, base styles, components, dark-theme overrides and the end-of-file guards. It loads after tailwind.css, so components and [data-theme="dark"] overrides still win where they did. The values app.css had customised live in the Tailwind theme (web_interface/tailwind/tailwind.config.js), so responsive and state variants use them too: darker light-mode gray text, emerald/amber bg-green-*/bg-yellow-*, font-size line-heights, token shadows, the narrow transition, and ring-offset colour. focus:outline-none and peer-focus:* are blocklisted so app.css's keyboard-only (:focus-visible) versions stay the only ones.
• Plugin web_ui/ iframes (/v3/plugin-ui/...) no longer load Tailwind v2.2.19 from cdnjs, which fails in AP mode. They link a local static/v3/plugin-frame.css: preflight plus a safelist of the common utility families, using v2's palette (green/yellow/purple = emerald/amber/violet). The official of-the-day fragment renders pixel-identical to the CDN version apart from its spinner.
• CI: new css-build job ("Tailwind CSS is up to date") in test.yml runs python scripts/build_css.py --check.
• Why v3, not v4: v4 drops bg-opacity-* and flex-shrink-* (both used here), switches the palette to oklch (every colour would shift), and needs Safari 16.4+/Chrome 111+.

State of main vs. the audit

The audit's "333 classes with no rule / .hidden missing" predates #568, which hand-filled most of the gaps. So the visual change here is smaller than the audit implies. What this PR fixes on top of main:

1. Border utilities had no style. On main border-b, border-t, divide-y (and .border only by per-rule patching) set a width with no border-style, so tab-row underlines, section dividers and table/list dividers never drew. The build adds preflight's *{border-width:0;border-style:solid} reset (plus hr and native text fields keeping a 1px border).
2. Every 2xl: class was dead. app.css wrote .2xl\:grid-cols-4, which is invalid CSS because of the unescaped leading digit. Tailwind escapes it, so at 1536px and wider the plugin grids go to 5 columns and the gutters widen, as the markup says.
3. The scroll-hint rule wiped backgrounds. .overflow-x-auto { background: … } (shorthand) reset background-color, so the live preview stage bg-gray-900 … overflow-x-auto rendered white, and the Tools command-output <pre class="bg-gray-900 text-gray-100 overflow-x-auto"> was light text on no background. The hint now skips elements with their own bg-*.
4. ~20 classes main never defined now work, among them the teal "configure" badge in Operation History, the button of a purple web_ui_actions card (white text on no background), the text-indigo-600 disk icon on Tools, toggle-switch knob offsets (translate-x-4/7), slider accents, password-strength colours, -mb-px on the tab rows, and resize-* on the textarea widget.
5. Source-order bugs: duration-*/ease-* now override transition-* and pr-20 overrides px-3 (plugin search field), as written.
6. space-y-* on <p> children now zeroes the UA bottom margin (Tailwind's rule), so the plugin-card metadata rows use the 6px gap the markup asks for instead of ~14px.

Plugin compatibility (a PRODUCT.md hard constraint): third-party widget JS renders into the page and can't be scanned, so the config safelists the ~17 utilities main defined that core no longer uses. The generated set is a superset of what worked before. I checked the one official plugin widget (soccer-scoreboard/widgets/custom-leagues.js); every utility it uses is present.

Visual check (before = origin/main c3a7a110, after = this branch)

Headless Chrome, full-page, 8 pages × {1280px, 375px} × {light, dark} = 32 pairs each side. They're saved locally (not committed) in the agent's scratchpad shots/{before,after2,compare2}; compare2/ holds before | after | diff-mask composites.

Environment noise excluded: live CPU/memory numbers, git branch/dirty state, SSE preview timing, and an "update available" banner in the first after-run (that server was one commit behind; I re-shot after rebasing).

Not fixed here (pre-existing, same on main): the "Logs tab" link in the Display hardware banner has no colour class, so it's browser-default blue (poor on the dark amber box); the Starlark Apps card title is overlapped by its toggle.

Payload (gzip level 6, Flask-Compress's default)

Tests

• New: test/test_build_css_script.py (pins are 64-hex SHA-256; per-OS/CPU asset mapping; unsupported CPU errors clearly; a corrupt cached CLI is replaced and a tampered download is rejected). test_web_static_audit.py now reads tailwind.css + app.css (CSS-unescaping \32xl\:), and asserts the runtime-built colour classes exist and that tailwind.css loads before app.css. test_pages_v3_partials.py asserts the plugin iframe links the local file and no CDN. Smoke/gzip tests cover the new assets.
• build_css.py --check mutation-checked: a new class in a template makes it exit 1. Five repeat builds are byte-identical, and reordering the content globs doesn't change the output.
• Cross-OS parity: the first CI run of --check failed because a Windows checkout (core.autocrlf) has a CRLF app.input.css, and Tailwind's minifier merges rules differently for it (same rules, different bytes). The content files' line endings turned out not to matter. build_css.py now feeds the CLI an LF copy of the input (with a test for it), and the committed Windows-built CSS passes --check on CI's Linux runner.
• Full suite (pytest -m "not hardware" test/ --ignore=test/plugins) on Windows, diffed against an origin/main baseline worktree: identical FAILED/ERROR sets (59 failed + 6 errors on both, the known Windows-only set); branch 6116 passed vs baseline 6098 (the new tests).
• JS suites (REQUIRE_DOM=1 node test/js/run_all.js against a live server): all suites pass on both baseline and branch (499 ok each).

Contributor impact

Change a template or static JS → run python3 scripts/build_css.py and commit static/v3/tailwind.css; CI tells you if you forgot. Documented in web_interface/README.md (new "Styling (Tailwind CSS)" section), CONTRIBUTING.md, the widgets README, and docs/WEB_INTERFACE_GUIDE.md.

🤖 Generated with Claude Code